<template>
    <el-space wrap>
<!--        <el-card>-->
<!--            <div class="menu_li" @click="handleConfigMenu('webSet')">-->
<!--                <div  class="menu_icon">-->
<!--                    <mi-icon name="fa-solid fa-desktop" />-->
<!--                </div>-->
<!--                <div>-->
<!--                    网站设置-->
<!--                </div>-->
<!--            </div>-->
<!--        </el-card>-->
        <el-card>
            <div class="menu_li" @click="handleConfigMenu('upload')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-cloud-arrow-up" />
                </div>
                <div>上传设置</div>
            </div>
        </el-card>
        <el-card>
            <div class="menu_li" @click="handleConfigMenu('wxMp')">
                <div class="menu_icon"><mi-icon name="fa-brands fa-weixin" /></div>
                <div>微信小程序</div>
            </div>
        </el-card>
        <el-card>
            <div class="menu_li" @click="handleConfigMenu('paySet')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-hand-holding-dollar" />
                </div>
                <div>支付配置</div>
            </div>
        </el-card>

        <el-card>
            <div class="menu_li" @click="handleConfigMenu('login')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-right-to-bracket" />
                </div>
                <div>登录配置</div>
            </div>
        </el-card>

        <el-card>
            <div class="menu_li" @click="handleConfigMenu('points')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-coins" />
                </div>
                <div>积分配置</div>
            </div>
        </el-card>

        <el-card>
            <div class="menu_li" @click="handleConfigMenu('store')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-store" />
                </div>
                <div>商城配置</div>
            </div>
        </el-card>

        <el-card>
            <div class="menu_li" @click="handleConfigMenu('dist')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-comment-sms" />
                </div>
                <div>分销配置</div>
            </div>
        </el-card>

        <el-card>
            <div class="menu_li" @click="handleConfigMenu('sms')">
                <div class="menu_icon">
                    <mi-icon name="fa-solid fa-comment-sms" />
                </div>
                <div>短信配置</div>
            </div>
        </el-card>

    </el-space>

    <web-set />
    <upload />
    <wx-mp />
    <pay-set />
    <login />
    <points />
    <store />
    <sms />
    <dist/>



</template>

<script setup lang="ts">

import {provide, reactive} from "vue";
import Edit from "@/model/edit";
import Upload from "@/views/site/config/upload.vue";
import WebSet from "@/views/site/config/webSet.vue";
import WxMp from "@/views/site/config/wxMp.vue";
import PaySet from "@/views/site/config/paySet.vue";
import Login from "@/views/site/config/Login.vue";
import Points from "@/views/site/config/points.vue";
import Store from "@/views/site/config/store.vue";
import Sms from "@/views/site/config/sms.vue";
import Dist from "@/views/site/config/dist.vue";

const handleConfigMenu = (handle:string) => {
    switch (handle) {
        case 'webSet':
            webSet.show = true
            break;
        case 'upload':
            upload.show = true
            break;
        case 'wxMp':
            wxMp.show = true
            break;
        case 'paySet':
            paySet.show = true
            break;
        case 'login':
            login.show = true
            break;
        case 'points':
            points.show = true
            break;
        case 'store':
            store.show = true
            break;
        case 'dist':
            dist.show = true
            break;
        case 'sms':
            sms.show = true
            break;
    }
}

const webSet = reactive(new Edit({}))
const upload = reactive(new Edit({}))
const wxMp = reactive(new Edit({}))
const paySet = reactive(new Edit({}))
const login = reactive(new Edit({}))
const points = reactive(new Edit({}))
const store = reactive(new Edit({}))
const dist = reactive(new Edit({}))
const sms = reactive(new Edit({}))
provide("webSet", webSet)
provide("upload", upload)
provide("wxMp", wxMp)
provide("paySet", paySet)
provide("login", login)
provide("points", points)
provide("store", store)
provide("dist", dist)
provide("sms", sms)




</script>

<style scoped lang="scss">
.menu_li{
    padding: 0 20px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.menu_icon{
    color: var(--mi-color-primary);
    width: 80px; height: 80px;
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
